<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- saved from url=(0054)http://www.jq22.com/demo/jquerybackground201812231515/ -->
<html lang="zh-CN" class="translated-ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>跳转至登录</title>

    <link rel="stylesheet" type="text/css" href="/ua/css/style.css">


    <style>
        body {
            background: #eef;
            height: 100vh;
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        #sky {
            margin-top: -60px;
            -webkit-perspective: 400px;
            perspective: 400px;
            -webkit-filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        #sky div {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        #sky .bird {
            -webkit-animation: fly 10000ms linear infinite;
            animation: fly 10000ms linear infinite;
        }

        #sky .bird .wind {
            position: absolute;
            left: 50%;
            width: 4px;
            height: 200px;
            margin-left: -2px;
            border-radius: 999px;
            overflow: hidden;
        }

        #sky .bird .wind:nth-child(1) {
            -webkit-transform: translate3d(-157px, 138px, -68px) rotateY(90deg);
            transform: translate3d(-157px, 138px, -68px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(1)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 90, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1935ms 1233ms linear infinite;
            animation: wind 1935ms 1233ms linear infinite;
        }

        #sky .bird .wind:nth-child(2) {
            -webkit-transform: translate3d(98px, 75px, 2px) rotateY(90deg);
            transform: translate3d(98px, 75px, 2px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(2)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 92, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1048ms 4242ms linear infinite;
            animation: wind 1048ms 4242ms linear infinite;
        }

        #sky .bird .wind:nth-child(3) {
            -webkit-transform: translate3d(181px, 103px, 66px) rotateY(90deg);
            transform: translate3d(181px, 103px, 66px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(3)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 174, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1577ms 4135ms linear infinite;
            animation: wind 1577ms 4135ms linear infinite;
        }

        #sky .bird .wind:nth-child(4) {
            -webkit-transform: translate3d(171px, -100px, 100px) rotateY(90deg);
            transform: translate3d(171px, -100px, 100px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(4)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 209, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1176ms 3610ms linear infinite;
            animation: wind 1176ms 3610ms linear infinite;
        }

        #sky .bird .wind:nth-child(5) {
            -webkit-transform: translate3d(155px, -139px, 45px) rotateY(90deg);
            transform: translate3d(155px, -139px, 45px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(5)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 168, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1154ms 1412ms linear infinite;
            animation: wind 1154ms 1412ms linear infinite;
        }

        #sky .bird .wind:nth-child(6) {
            -webkit-transform: translate3d(61px, 33px, 72px) rotateY(90deg);
            transform: translate3d(61px, 33px, 72px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(6)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 242, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2079ms 4956ms linear infinite;
            animation: wind 2079ms 4956ms linear infinite;
        }

        #sky .bird .wind:nth-child(7) {
            -webkit-transform: translate3d(-61px, 37px, 43px) rotateY(90deg);
            transform: translate3d(-61px, 37px, 43px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(7)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 195, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2506ms 2873ms linear infinite;
            animation: wind 2506ms 2873ms linear infinite;
        }

        #sky .bird .wind:nth-child(8) {
            -webkit-transform: translate3d(-100px, 16px, 70px) rotateY(90deg);
            transform: translate3d(-100px, 16px, 70px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(8)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 66, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1962ms 1394ms linear infinite;
            animation: wind 1962ms 1394ms linear infinite;
        }

        #sky .bird .wind:nth-child(9) {
            -webkit-transform: translate3d(114px, 26px, -30px) rotateY(90deg);
            transform: translate3d(114px, 26px, -30px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(9)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 30, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2489ms 2975ms linear infinite;
            animation: wind 2489ms 2975ms linear infinite;
        }

        #sky .bird .wind:nth-child(10) {
            -webkit-transform: translate3d(-57px, -48px, 33px) rotateY(90deg);
            transform: translate3d(-57px, -48px, 33px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(10)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 124, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2309ms 3147ms linear infinite;
            animation: wind 2309ms 3147ms linear infinite;
        }

        #sky .bird .wind:nth-child(11) {
            -webkit-transform: translate3d(139px, 107px, 24px) rotateY(90deg);
            transform: translate3d(139px, 107px, 24px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(11)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 200, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1365ms 2503ms linear infinite;
            animation: wind 1365ms 2503ms linear infinite;
        }

        #sky .bird_body {
            position: relative;
            width: 30px;
            height: 40px;
            background: #a7b1d5;
        }

        #sky .bird_head {
            position: absolute;
            top: -30px;
            border-right: 15px solid transparent;
            border-bottom: 30px solid #779dcc;
            border-left: 15px solid transparent;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            -webkit-transform: rotateX(-20deg);
            transform: rotateX(-20deg);
        }

        #sky .bird_wing_left {
            position: absolute;
            left: -30px;
            height: 30px;
            border-right: 30px solid #a297ff;
            border-bottom: 10px solid transparent;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
            animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
        }

        #sky .bird_wing_left_top {
            position: absolute;
            left: -30px;
            border-right: 30px solid #9296de;
            border-bottom: 30px solid transparent;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
            animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
        }

        #sky .bird_wing_right {
            position: absolute;
            left: 30px;
            height: 30px;
            border-left: 30px solid #8399e6;
            border-bottom: 10px solid transparent;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
            animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
        }

        #sky .bird_wing_right_top {
            position: absolute;
            border-left: 30px solid #bc73e1;
            border-bottom: 30px solid transparent;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
            animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
        }

        #sky .bird_tail_left {
            position: absolute;
            top: 40px;
            border-right: 30px solid transparent;
            border-top: 40px solid #c279f7;
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform: rotateX(-20deg);
            transform: rotateX(-20deg);
        }

        #sky .bird_tail_right {
            position: absolute;
            top: 40px;
            border-left: 30px solid transparent;
            border-top: 40px solid #ae79db;
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform: rotateX(-20deg);
            transform: rotateX(-20deg);
        }

        @-webkit-keyframes fly {
            0% {
                -webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
            }
            100% {
                -webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
            }
        }

        @keyframes fly {
            0% {
                -webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
            }
            100% {
                -webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
            }
        }

        @-webkit-keyframes wingLeft {
            0% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
            100% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
        }

        @keyframes wingLeft {
            0% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
            100% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
        }

        @-webkit-keyframes wingRight {
            0% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
            100% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
        }

        @keyframes wingRight {
            0% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
            100% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
        }

        @-webkit-keyframes wind {
            0% {
                -webkit-transform: translateY(-300px);
                transform: translateY(-300px);
            }
            100% {
                -webkit-transform: translateY(200px);
                transform: translateY(200px);
            }
        }

        @keyframes wind {
            0% {
                -webkit-transform: translateY(-300px);
                transform: translateY(-300px);
            }
            100% {
                -webkit-transform: translateY(200px);
                transform: translateY(200px);
            }
        }
    </style>


</head>
<body style="">


<div id="sky">
    <div class="bird">
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="bird_body">
            <div class="bird_head"></div>
            <div class="bird_wing_left">
                <div class="bird_wing_left_top"></div>
            </div>
            <div class="bird_wing_right">
                <div class="bird_wing_right_top"></div>
            </div>
            <div class="bird_tail_left"></div>
            <div class="bird_tail_right"></div>
        </div>
    </div>
</div>

<div id="container" style="display: none">
    <div id="output">
        <div class="containerT">
            <p style="font-size: 16px;
    font-weight: 700;">注册完成,正在跳转</p>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>

<script type="text/javascript">

    //重定向到登录页面

    $('#container').fadeIn(1500, function () {
        $('#container').fadeOut(1500, function () {
            window.location = '${rUri}';
        });
    });

</script>


</body>
</html>